<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">表单数据</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">查看和管理表单提交数据</p>
            </div>
            <div class="flex items-center gap-2">
                <button class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    导出数据
                </button>
                <button class="btn-primary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    数据分析
                </button>
            </div>
        </div>

        <!-- 数据统计 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="card text-center">
                <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">{{ totalSubmissions }}</div>
                <div class="text-gray-600 dark:text-gray-400">总提交数</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">{{ todaySubmissions }}</div>
                <div class="text-gray-600 dark:text-gray-400">今日提交</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">{{ activeForms }}</div>
                <div class="text-gray-600 dark:text-gray-400">活跃表单</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2">{{ avgCompletion }}</div>
                <div class="text-gray-600 dark:text-gray-400">平均完成率</div>
            </div>
        </div>

        <!-- 搜索和筛选 -->
        <div class="card">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <div class="relative">
                        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <input type="text" placeholder="搜索提交者..." class="input pl-10" />
                    </div>
                </div>
                <div class="flex gap-2">
                    <select class="input">
                        <option>所有表单</option>
                        <option>用户注册表单</option>
                        <option>意见反馈表单</option>
                        <option>产品申请表单</option>
                        <option>满意度调查</option>
                    </select>
                    <select class="input">
                        <option>所有状态</option>
                        <option>已完成</option>
                        <option>进行中</option>
                        <option>已放弃</option>
                    </select>
                    <button class="btn-secondary">筛选</button>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="card">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200 dark:border-gray-700">
                            <th class="text-left p-4 font-semibold text-gray-800 dark:text-gray-200">提交信息</th>
                            <th class="text-left p-4 font-semibold text-gray-800 dark:text-gray-200">表单名称</th>
                            <th class="text-left p-4 font-semibold text-gray-800 dark:text-gray-200">状态</th>
                            <th class="text-left p-4 font-semibold text-gray-800 dark:text-gray-200">提交时间</th>
                            <th class="text-left p-4 font-semibold text-gray-800 dark:text-gray-200">完成时间</th>
                            <th class="text-left p-4 font-semibold text-gray-800 dark:text-gray-200">操作</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <tr v-for="submission in submissions" :key="submission.id"
                            class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                            <td class="p-4">
                                <div>
                                    <div class="font-medium text-gray-900 dark:text-gray-100">{{ submission.submitter }}
                                    </div>
                                    <div class="text-sm text-gray-500 dark:text-gray-400">{{ submission.email }}</div>
                                </div>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center gap-2">
                                    <span :class="getFormBadgeClass(submission.formCategory)">{{ submission.formName
                                        }}</span>
                                </div>
                            </td>
                            <td class="p-4">
                                <span :class="getStatusBadgeClass(submission.status)">
                                    {{ getStatusText(submission.status) }}
                                </span>
                            </td>
                            <td class="p-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ submission.submittedAt }}
                            </td>
                            <td class="p-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ submission.completedAt || '-' }}
                            </td>
                            <td class="p-4">
                                <div class="flex items-center gap-2">
                                    <button
                                            class="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                        </svg>
                                    </button>
                                    <button
                                            class="p-2 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                        </svg>
                                    </button>
                                    <button
                                            class="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="flex items-center justify-between mt-6">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    显示 1-10 条，共 {{ submissions.length }} 条记录
                </div>
                <div class="flex items-center gap-2">
                    <button class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-50"
                            disabled>
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <button class="px-3 py-2 bg-blue-600 text-white rounded-lg">1</button>
                    <button
                            class="px-3 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">2</button>
                    <button
                            class="px-3 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">3</button>
                    <button
                            class="px-3 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">4</button>
                    <button
                            class="px-3 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">5</button>
                    <button class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- 数据详情弹窗 -->
        <div v-if="showDetailModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div
                 class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 w-full max-w-4xl max-h-[80vh] overflow-y-auto">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">数据详情 - {{
                        selectedSubmission?.submitter }}</h3>
                    <button @click="showDetailModal = false"
                            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div v-if="selectedSubmission" class="space-y-6">
                    <!-- 基本信息 -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">提交者</label>
                            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">{{ selectedSubmission.submitter }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">邮箱</label>
                            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">{{ selectedSubmission.email }}</div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">表单名称</label>
                            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">{{ selectedSubmission.formName }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">提交时间</label>
                            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">{{ selectedSubmission.submittedAt }}
                            </div>
                        </div>
                    </div>

                    <!-- 表单数据 -->
                    <div>
                        <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">表单数据</h4>
                        <div class="space-y-3">
                            <div v-for="field in selectedSubmission.fields" :key="field.id"
                                 class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="font-medium text-gray-900 dark:text-gray-100">{{ field.label }}</span>
                                    <span :class="getFieldTypeClass(field.type)">{{ field.type }}</span>
                                </div>
                                <div class="text-gray-600 dark:text-gray-400">{{ field.value || '未填写' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div
                     class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button @click="showDetailModal = false" class="btn-secondary">关闭</button>
                    <button class="btn-primary">导出详情</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="lowcode-form-data">
import { ref, computed } from 'vue'

defineOptions({ name: 'lowcode-form-data' })

const submissions = ref([
    {
        id: 1,
        submitter: '张三',
        email: 'zhangsan@example.com',
        formName: '用户注册表单',
        formCategory: 'user',
        status: 'completed',
        submittedAt: '2024-01-15 14:30:25',
        completedAt: '2024-01-15 14:32:10',
        fields: [
            { id: 1, label: '用户名', type: 'input', value: 'zhangsan' },
            { id: 2, label: '邮箱', type: 'input', value: 'zhangsan@example.com' },
            { id: 3, label: '性别', type: 'radio', value: '男' },
            { id: 4, label: '兴趣爱好', type: 'checkbox', value: '编程,阅读,运动' },
            { id: 5, label: '个人简介', type: 'textarea', value: '热爱技术，喜欢学习新知识' }
        ]
    },
    {
        id: 2,
        submitter: '李四',
        email: 'lisi@example.com',
        formName: '意见反馈表单',
        formCategory: 'feedback',
        status: 'completed',
        submittedAt: '2024-01-15 15:20:10',
        completedAt: '2024-01-15 15:22:30',
        fields: [
            { id: 1, label: '反馈类型', type: 'select', value: '功能建议' },
            { id: 2, label: '标题', type: 'input', value: '希望增加暗黑模式' },
            { id: 3, label: '详细描述', type: 'textarea', value: '建议在系统设置中增加暗黑模式选项，提升用户体验' },
            { id: 4, label: '联系方式', type: 'input', value: 'lisi@example.com' },
            { id: 5, label: '优先级', type: 'radio', value: '中等' }
        ]
    },
    {
        id: 3,
        submitter: '王五',
        email: 'wangwu@example.com',
        formName: '产品申请表单',
        formCategory: 'application',
        status: 'in_progress',
        submittedAt: '2024-01-15 16:10:45',
        completedAt: null,
        fields: [
            { id: 1, label: '公司名称', type: 'input', value: 'ABC科技有限公司' },
            { id: 2, label: '联系人', type: 'input', value: '王五' },
            { id: 3, label: '联系电话', type: 'input', value: '13800138000' },
            { id: 4, label: '邮箱地址', type: 'input', value: 'wangwu@example.com' },
            { id: 5, label: '产品类型', type: 'select', value: '企业版' }
        ]
    },
    {
        id: 4,
        submitter: '赵六',
        email: 'zhaoliu@example.com',
        formName: '满意度调查',
        formCategory: 'survey',
        status: 'completed',
        submittedAt: '2024-01-15 17:05:20',
        completedAt: '2024-01-15 17:08:15',
        fields: [
            { id: 1, label: '整体满意度', type: 'radio', value: '非常满意' },
            { id: 2, label: '功能完整性', type: 'radio', value: '满意' },
            { id: 3, label: '界面友好性', type: 'radio', value: '非常满意' },
            { id: 4, label: '性能表现', type: 'radio', value: '满意' },
            { id: 5, label: '改进建议', type: 'textarea', value: '希望增加更多的自定义选项' }
        ]
    },
    {
        id: 5,
        submitter: '钱七',
        email: 'qianqi@example.com',
        formName: '用户注册表单',
        formCategory: 'user',
        status: 'abandoned',
        submittedAt: '2024-01-15 18:30:10',
        completedAt: null,
        fields: [
            { id: 1, label: '用户名', type: 'input', value: 'qianqi' },
            { id: 2, label: '邮箱', type: 'input', value: 'qianqi@example.com' },
            { id: 3, label: '密码', type: 'input', value: '' },
            { id: 4, label: '确认密码', type: 'input', value: '' }
        ]
    }
])

const showDetailModal = ref(false)
const selectedSubmission = ref<any>(null)

const totalSubmissions = computed(() => submissions.value.length)
const todaySubmissions = computed(() => submissions.value.filter(s => s.submittedAt.includes('2024-01-15')).length)
const activeForms = computed(() => new Set(submissions.value.map(s => s.formName)).size)
const avgCompletion = computed(() => {
    const completed = submissions.value.filter(s => s.status === 'completed').length
    return Math.round((completed / submissions.value.length) * 100) + '%'
})

function getFormBadgeClass(category: string) {
    const classes = {
        'user': 'px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 text-xs rounded-full',
        'feedback': 'px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded-full',
        'application': 'px-2 py-1 bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400 text-xs rounded-full',
        'survey': 'px-2 py-1 bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400 text-xs rounded-full'
    }
    return classes[category as keyof typeof classes] || classes['user']
}

function getStatusBadgeClass(status: string) {
    const classes = {
        'completed': 'px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded-full',
        'in_progress': 'px-2 py-1 bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400 text-xs rounded-full',
        'abandoned': 'px-2 py-1 bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400 text-xs rounded-full'
    }
    return classes[status as keyof typeof classes] || classes['in_progress']
}

function getStatusText(status: string) {
    const texts = {
        'completed': '已完成',
        'in_progress': '进行中',
        'abandoned': '已放弃'
    }
    return texts[status as keyof typeof texts] || '未知'
}

function getFieldTypeClass(type: string) {
    const classes = {
        'input': 'px-1 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 text-xs rounded',
        'textarea': 'px-1 py-0.5 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded',
        'select': 'px-1 py-0.5 bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400 text-xs rounded',
        'radio': 'px-1 py-0.5 bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400 text-xs rounded',
        'checkbox': 'px-1 py-0.5 bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400 text-xs rounded'
    }
    return classes[type as keyof typeof classes] || classes['input']
}
</script>